import React from "react";
import { Badge, TabBar } from 'antd-mobile'
import {
    MessageOutline,
    MessageFill,
    HeartOutline,
    HeartFill,
    TeamOutline,
    TeamFill,
    TruckOutline,
} from 'antd-mobile-icons'
/**
 * 底部
 */
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    tabs = [
        {
            key: 'home',
            title: '首页',
            icon: (active: boolean) =>
                active ? <HeartFill  fontSize={25} /> : <HeartOutline  fontSize={25}/>,
            badge: Badge.dot,
        },
        {
            key: 'shopping',
            title: '购物车',
            icon: <TruckOutline />,
            badge: '5',
        },
        {
            key: 'news',
            title: '消息',
            icon: (active: boolean) =>
                active ? <MessageFill  fontSize={25} /> : <MessageOutline  fontSize={25} />,
            badge: '99+',
        },
        {
            key: 'personalCenter',
            title: '个人中心',
            icon: (active: boolean) =>
                active ? <TeamFill  fontSize={25} /> : <TeamOutline  fontSize={25} />,
        },
    ]

    render() {
        return (
               <div className={"bottomApp"}>
                   <TabBar onChange={
                       key => {
                           this.props.history.replace('/'+key);
                       }}>
                       {this.tabs.map((item,index) => (
                           <TabBar.Item
                               key={item.key}
                               icon={item.icon}
                               title={item.title}
                               badge={item.badge}
                           />
                       ))}
                   </TabBar>
               </div>
        );
    }
}
export default App